<template>
    <div class="out-style">
        <Modal v-model="isShow" :title=reportTitle :closable="false" :mask-closable="false" class="global-modal-line">
            <template>
                <Spin size="large" fix v-if="spinShow"></Spin>
                <Form :model="formItem" :label-width="80">
                    <FormItem label="标题：">
                        <Input v-model="formItem.report_title" placeholder="请输入标题"></Input>
                    </FormItem>
                    <FormItem label="举报人姓名或部门：">
                        <Input v-model="formItem.report_people_name" placeholder="请填写姓名或部门"></Input>
                    </FormItem>
                    <FormItem label="电话：">
                        <Input v-model="formItem.phone" placeholder="请输入电话"></Input>
                    </FormItem>
                    <FormItem label="被举报人姓名或部门：">
                        <Input v-model="formItem.be_complain_name" placeholder="请输入被举报人姓名或部门"></Input>
                    </FormItem>
                    <FormItem label="内容：">
                        <Input v-model="formItem.report_content" type="textarea" :autosize="{minRows: 2,maxRows: 5}"
                               placeholder="请输入内容"></Input>
                    </FormItem>
                </Form>
            </template>
            <div slot="footer">
                <Button type="text" @click="cancelAction()">取消</Button>
                <Button type="success" @click="handleSubmit()">保存</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
import { getReportById } from '@/api/manager-report'
export default {
  name: 'AddEditReport',
  props: {
    type: {
      type: String,
      default: () => {
        return 'add'
      }
    },
    isShow: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    reportTitle: {
      type: String,
      default: () => {
        return '添加举报'
      }
    },
    id: {
      type: String,
      default: () => {
        return {}
      }
    }
  },
  data () {
    return {
      spinShow: false,
      btnLoading: false,
      formItem: {
        id: '',
        report_title: '',
        report_people_name: '',
        phone: '',
        be_complain_name: '',
        report_content: ''
      }
    }
  },
  methods: {
    cancelAction () {
      this.$emit('cancel')
    },
    handleSubmit (formItem) {
      this.$emit('results', this.formItem)
    },
    useIdByInfo () {
      let param = {
        id: this.id
      }
      this.spinShow = true
      getReportById(param).then(ret => {
        this.spinShow = false
        if (ret.data.errcode === 1001) {
          this.formItem.report_title = ret.data.data.list[0].report_title
          this.formItem.report_people_name = ret.data.data.list[0].report_people_name
          this.formItem.phone = ret.data.data.list[0].phone
          this.formItem.be_complain_name = ret.data.data.list[0].be_complain_name
          this.formItem.report_content = ret.data.data.list[0].report_content
        } else {
          this.$Message.error('获取数据失败')
        }
      })
    }
  },
  watch: {
    isShow (data) {
      console.log(data, 'watch数据')
      if (this.isShow) {
        if (this.type === 'edit') {
          this.useIdByInfo()
        }
      } else {
        this.formItem = {
          report_title: '',
          report_people_name: '',
          phone: '',
          be_complain_name: '',
          report_content: ''
        }
      }
    }
  }
}
</script>

<style scoped>

</style>
